/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TextInput, FlatList} from 'react-native';
import { Icon } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Row, Between, Hand, Text, Image
} from '../../../../library';
// import {Icon} from '../preset';



/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class Nation extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props){
        super(props)
        this.state = {
            nationList:['汉族','蒙古族','回族','藏族','维吾尔族','苗族','彝族','壮族','布依族','朝鲜族','满族','瑶族','白族','土家族']

        }
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
            return(
            <Page>
                {/* 此页面背景色为 fff */}
                <Content bg='#fff' mt='48'>

                    {/* 搜索 star */}
                    <View>
                        <Row pa='8 10' ma='8 10' df bg='#f2f2f3' ra='5' h='30' x='center' y='center'>
                            <Image df source={require('../../../../assets/u1844.png')} w='14' h='14' mr='6'></Image>
                            <Hand f='1'>
                                <TextInput placeholder='搜索' placeholderTextColor='#bfbfbf' multiline = {true} underlineColorAndroid='transparent' style={{color:'#929296',height:30,padding:0,flex:1}} />
                            </Hand>
                        </Row>
                    </View>
                    {/* 搜索 star */}


                    <FlatList
                        style={{paddingLeft:15}}
                        data={this.state.nationList}
                        // keyExtractor ={ (item, index) => index}
                        renderItem={({item}) => {
                            return(
                                <Text size='14' df bb='1 #f0f0f0' h='44' lh='44' color='#333' style={{fontWeight:'bold'}}>{item}</Text>
                            )
                        }}
                    />
                    
                    
                </Content>


                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff'>
                    <Between px='10'>
                        <Icon type='left' size='md' color='#00CC66' />
                        <Text size='17'>基本信息</Text>
                        <Text> </Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
            </Page>
        )
    }
}


